<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2025-10-13 21:42:21
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-10-27 17:29:24
 * @FilePath: \BLOG\src\views\home\components\AuthInfo.vue
-->
<template>
  <div class="auth-wrap">
    <div class="auth-content-wrap">
      <img class="avatar pointer kbn-custom" data-tip="想要了解 「关于我 」 的跟你更多信息吗？" :src="state.qqInfo.avatar" @click="handleTo('/about/me')" />
      <div class="qq-info">
        <div class="qq-line" style="justify-content: center; margin-bottom: 16px">
          <div class="qq-item value" style="font-size: 20px; margin-right: 20px">冬七</div>
          <div class="qq-item">
            <span class="qq-label">QQ:</span>
            <span class="num-f value">37523953</span>
          </div>
        </div>
        <div class="qq-line level">
          <div class="qq-item-level-num">
            <span class="num-f" style="margin-right: 2px">LV</span>
            <span class="num-f">{{ state.qqInfo.qqlevel }}</span>
          </div>
          <div class="qq-item">{{ getLevelDesc(state.qqInfo.qqlevel) }}</div>
        </div>
        <div class="qq-line">
          <div class="qq-item">
            <span class="qq-label">Q龄:</span>
            <span class="num num-f">{{ new Date().getFullYear() - 2002 }}</span>
            <span class="qq-label">年</span>
          </div>
          <div class="qq-item">
            <span class="qq-label">签名:</span>
            <span class="value">小得盈满!</span>
          </div>
        </div>

        <div class="qq-line">
          <div class="qq-item">
            <span class="qq-label">升级剩余:</span>
            <span class="num num-f">{{ state.qqInfo.iNextLevelDay }}</span>
            <span class="qq-label">天</span>
          </div>
          <div class="qq-item">
            <span class="qq-label">总活跃天数:</span>
            <span class="num num-f">{{ state.qqInfo.iTotalActiveDay }}</span>
            <span class="qq-label">天</span>
          </div>
        </div>
      </div>
      <div class="article-total">
        <div class="article-total-item">
          <div class="label">📚 文章总数</div>
          <div class="num num-f">{{ page.total || 0 }}</div>
        </div>
        <div class="article-total-item">
          <div class="label">📒 分类</div>
          <div class="num num-f">{{ cateLen || 0 }}</div>
        </div>
        <div class="article-total-item">
          <div class="label">🔖 标签</div>
          <div class="num num-f">{{ state.labelLen || 0 }}</div>
        </div>
      </div>
      <div class="code-store">
        <img @click="handleToCodeStore(1)" class="icon-code kbn-custom pointer" data-tip="想要前往我的「 github 」吗？" src="@/assets/images/icon/github.svg" alt="" />
        <img @click="handleToCodeStore(2)" class="icon-code gitlab kbn-custom pointer" data-tip="想要前往我的「 gitlab 」吗？" src="@/assets/images/icon/gitlab.png" alt="" />
        <img @click="handleToCodeStore(3)" class="icon-code kbn-custom pointer" data-tip="想要前往我的「 gitee 」吗？" src="@/assets/images/icon/gitee.svg" alt="" />
        <img @click="handleToCodeStore(4)" class="icon-code csdn kbn-custom pointer" data-tip="想要前往我的「 CSDN 」吗？" src="@/assets/images/icon/csdn.png" alt="" />
        <img @click="handleToCodeStore(5)" class="icon-code zhihu kbn-custom pointer" data-tip="想要前往我的「 知乎 」吗？" src="@/assets/images/icon/zhihu.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import moment from 'moment';
import { getDict, getQQInfo } from '@/api/common';
import { reactive } from 'vue';
import { useAppStore } from '@/store/app';
import { useRouter } from 'vue-router';

const store = useAppStore();
const router = useRouter();

const props = defineProps({
  page: {
    type: Object,
    default: () => ({
      page: 1,
      size: 10,
      total: 0
    })
  },
  cateLen: {
    type: Number,
    default: 0
  }
});

const state = reactive({
  qqInfo: {
    qq: '37523953',
    name: '冬七',
    avatar:
      'http://qh.qlogo.cn/g?b=sdk&ek=AQDIibVcMrProI2iakOoWkjiaiaysvRQicDtgOp5aa6P0vaf9LaPQVUIiaPfuWicUOo8q9rVVpLCW079sficWZhicWRlZ3TtjtROJ1MPXmaKNwXBTBjG7icXhws8M&s=100&t=1760063176',
    qqlevel: '99',
    iNextLevelDay: '129',
    iTotalActiveDay: '10271',
    iRealDays: '0.0',
    lineTime: 0,
    svip: 4
  },
  labelLen: 0
});

// QQ等级描述
const getLevelDesc = level => {
  let text = '';

  const q = '🐧',
    hg = '👑',
    ty = '☀️',
    yh = '🌙',
    xx = '⭐';

  let qsum = Math.floor(level / 256);
  let husum = Math.floor(level / 64);
  let tysum = Math.floor((level - husum * 64) / 16);
  let yhsum = Math.floor((level - husum * 64 - tysum * 16) / 4);
  let xxsum = level - husum * 64 - tysum * 16 - yhsum * 4;
  if (qsum > 0) {
    text += q.repeat(qsum);
  }
  if (husum > 0) {
    text += hg.repeat(husum);
  }
  if (tysum > 0) {
    text += ty.repeat(tysum);
  }
  if (yhsum > 0) {
    text += yh.repeat(yhsum);
  }
  if (xxsum > 0) {
    text += xx.repeat(xxsum);
  }
  return text;
};

// 获取标签长度
const getBlogLabel = () => {
  getDict({ dictType: 'blog_label' }).then(res => {
    if (res.code === 200) {
      state.labelLen = res.data.length;
    }
  });
};
getBlogLabel();

// 代码仓库
const handleToCodeStore = (type: number) => {
  const urlMap = {
    1: 'https://github.com/snows-l',
    2: 'https://gitlab.com/snows_l',
    3: 'https://gitee.com/snows_l',
    4: 'https://blog.csdn.net/snows_l?type=blog',
    5: 'https://www.zhihu.com/people/snows_l'
  };
  if (urlMap[type]) {
    window.open(urlMap[type], '_blank');
  }
};

// 获取qq信息
const getInfoByQQFn = () => {
  if (store.qqInfo.date && store.qqInfo.date == moment().format('YYYY-MM-DD')) {
    state.qqInfo = store.qqInfo;
  } else {
    getQQInfo({ qq: '37523953', isAuth: 1 })
      .then(res => {
        if (res.code == 200) {
          state.qqInfo = {
            date: moment().format('YYYY-MM-DD'),
            ...state.qqInfo,
            ...res.data
          };
          store.SET_QQ_INFO(state.qqInfo);
        }
      })
      .catch(() => {
        if (store.qqInfo.date) {
          state.qqInfo = store.qqInfo;
        }
      });
  }
};
getInfoByQQFn();

// 跳转关于我
const handleTo = (path: string) => {
  router.push({
    path
  });
};
</script>

<style lang="scss" scoped>
.auth-wrap {
  background-image: url('@/assets/images/bg/aside_author_image.jpg');
  background-size: 100% 30%;
  background-repeat: no-repeat;
  border-radius: var(--border-radius-1);
  .auth-content-wrap {
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: linear-gradient(#ffffff00, #ebfcfd 40%, #caeafa 100%);
    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: rgba(144, 147, 153, 0.23) 3px solid;
    }
    .mingyan {
      margin-top: 10px;
      line-height: 30px;
      color: #333;
    }
    .qq-info {
      margin-top: 20px;
      width: 100%;
      padding: 20px 0;
      border: 1px dashed #ccc;
      border-radius: 5px;
      .qq-line {
        margin-top: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        &:first-child {
          margin-top: 0px;
        }
        .value {
          color: #333;
        }
      }
      .level {
        justify-content: center;
        .qq-item-level-num {
          padding: 3px 6px;
          background-color: #f0ad4e;
          color: #fff;
          border-radius: 4px;
          margin-right: 10px;
        }
      }
      .num {
        margin: 0 4px;
        color: var(--theme-color);
      }
      .qq-label {
        color: #333333;
      }
    }
    .article-total {
      margin-top: 30px;
      display: flex;
      justify-content: space-around;
      .article-total-item {
        margin: 0 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .label {
          font-size: 14px;
          margin-bottom: 10px;
          color: #111;
        }
        .num {
          font-size: 20px;
          color: var(--theme-color);
        }
      }
    }
    .code-store {
      margin-top: 20px;
      width: 100%;
      border-top: 1px solid #cacaca;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 10px 0 10px;
      .icon-code {
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
      .gitlab {
        width: 40px;
        height: 40px;
      }
      .csdn {
        height: 40px;
      }
    }
  }
}
</style>
